@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(135deg, #fdf7f8 0%, #f8fafc 50%, #fff5f5 100%);
  min-height: 100vh;
}

code {
  font-family: 'JetBrains Mono', 'Fira Code', source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #e47693, #d4597a);
  border-radius: 10px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #d4597a, #b83d60);
}

/* 选择文本样式 */
::selection {
  background: rgba(228, 118, 147, 0.2);
  color: #1e293b;
}

::-moz-selection {
  background: rgba(228, 118, 147, 0.2);
  color: #1e293b;
}

/* 基础组件样式 */
.input-field {
  @apply w-full px-4 py-3 border border-secondary-200 rounded-xl shadow-soft placeholder-secondary-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 bg-white/90 backdrop-blur-sm;
}

.btn-primary {
  @apply inline-flex items-center justify-center px-6 py-3 border border-transparent text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-pink hover:shadow-glow;
}

.btn-secondary {
  @apply inline-flex items-center justify-center px-6 py-3 border border-secondary-200 text-sm font-semibold rounded-xl text-secondary-700 bg-white/90 backdrop-blur-sm hover:bg-white hover:border-primary-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all duration-200 shadow-soft hover:shadow-pink;
}

.btn-ghost {
  @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg text-secondary-600 hover:text-primary-600 hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all duration-200;
}

.btn-accent {
  @apply inline-flex items-center justify-center px-6 py-3 border border-transparent text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-accent-500 to-accent-600 hover:from-accent-600 hover:to-accent-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-soft hover:shadow-glow;
}

/* 聊天界面样式 */
.avatar {
  @apply w-10 h-10 rounded-full overflow-hidden flex-shrink-0 shadow-soft border-2 border-white;
}

.avatar-image {
  @apply w-full h-full object-cover;
}

.avatar-fallback {
  @apply w-full h-full flex items-center justify-center text-sm font-semibold bg-gradient-to-br from-primary-400 to-primary-600 text-white;
}

.message-bubble {
  @apply px-4 py-3 rounded-2xl max-w-xs lg:max-w-md break-words shadow-soft;
}

.message-bubble-sent {
  @apply bg-gradient-to-br from-primary-500 to-primary-600 text-white;
}

.message-bubble-received {
  @apply bg-white/90 backdrop-blur-sm text-secondary-900 border border-secondary-100;
}

/* 卡片样式 */
.card {
  @apply bg-white/90 backdrop-blur-sm rounded-2xl shadow-soft border border-white/20 hover:shadow-pink transition-all duration-300;
}

.card-elevated {
  @apply bg-white/95 backdrop-blur-md rounded-2xl shadow-pink border border-white/30 hover:shadow-glow transition-all duration-300;
}

/* 特殊效果 */
.glass-effect {
  @apply bg-white/10 backdrop-blur-md border border-white/20;
}

.gradient-text {
  @apply bg-gradient-to-r from-primary-600 to-rose-600 bg-clip-text text-transparent;
}

.text-gradient-primary {
  @apply bg-gradient-to-r from-primary-500 to-primary-700 bg-clip-text text-transparent;
}

.text-gradient-accent {
  @apply bg-gradient-to-r from-rose-500 to-rose-700 bg-clip-text text-transparent;
}

/* 动画效果 */
.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

.animate-slide-up {
  animation: slideUp 0.3s ease-out;
}

.animate-bounce-subtle {
  animation: bounceSubtle 2s infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite alternate;
}

/* 加载动画 */
.loading-spinner {
  @apply animate-spin rounded-full border-2 border-primary-200 border-t-primary-500;
}

.loading-dots::after {
  content: '';
  animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}